<template>
  <div class="word-container">
    <div class="a4" id="contract">
      <!-- 头部 -->
      <word-header1 ref="wordHeader" />

      <!-- 正文 -->
      <word-text :list="contractList" @delete="deleteClause" @edit="editClause" @add="addClause" />

      <!-- 尾部 -->
      <word-footer1 />
    </div>

    <!-- 条款库 -->
    <div class="clause-container">
      <h3 class="p-ver-sm">操作：</h3>
      <el-button-group>
        <el-button type="primary" size="medium" icon="el-icon-s-order" @click="viewActions">操作轨迹</el-button>
        <el-button type="primary" size="medium" icon="el-icon-document" @click="view">预览并打印</el-button>
      </el-button-group>
      <h3 class="p-ver-sm m-top-sm">条款库：</h3>
      <clauses :list="clauseList" />
    </div>

    <!-- 编辑条款 -->
    <clause-edit ref="clauseEdit" :title="clauseTitle" :clause="clause" @change="editClauseChange" />
    <!-- 操作轨迹 -->
    <edit-history ref="editHistory" :data="historyList" />
  </div>
</template>

<script>
import contractMixin from '@/mixins/contract';

import data from '@/api/data-contract';

import Clauses from '@/components/Contract/Clauses';
import WordHeader1 from '@/components/Contract/WordHeader1';
import WordFooter1 from '@/components/Contract/WordFooter1';
import WordText from '@/components/Contract/WordText';
import ClauseEdit from '@/components/Contract/ClauseEdit';
import EditHistory from '@/components/Contract/EditHistory';

export default {
  components: {Clauses, WordText, WordHeader1, WordFooter1, ClauseEdit, EditHistory},
  mixins: [contractMixin],
  data() {
    return {
      // 合同列表
      contractList: data.list,
      clauseList: data.clauseList,

      // 是否结构性缺失
      lackNum: 0,
      // 当前操作条款
      clauseTitle: '',
      clauseIndexs: [],
      clause: {},

      // 操作轨迹
      historyList: []
    };
  },
  methods: {
    // 预览
    view() {
      if (this.lackNum === 0) {
        this.$alert('合同交付是固定时效的，但合同所约定的内容是持续的，删除后意味着保密协议的解除随着合同的解除而解除，失去了约束力。<br>合同约定周期内创作的产品归甲方所有。', '结构性缺失', {
          type: 'error',
          dangerouslyUseHTMLString: true
        });
        this.lackNum++;
        return;
      }
      let header = this.$refs.wordHeader.getValues();
      let footer = {
        company1: header.company1,
        company2: header.company2,
        time1: header.time,
        time2: header.time
      };
      this.$router.push({
        name: 'contractViewUnstandard',
        params: {
          header,
          footer,
          contractList: this.contractList
        }
      });
    },

    // 操作轨迹
    viewActions() {
      this.$refs.editHistory.dialogToggle(true);
    }
  }
};
</script>
